<template>
  <view class="pdf_detail" v-if="course">
    <navbar :title="course?course.title+'': '学习资料'"></navbar>
    <view class="process_row">
      <view class="label">学习
        <view class="red">资料提取</view>
      </view>
      <view class="btn" @click="toDown">
        <view class="icon down"></view>
        下载文档
      </view>
      <view class="btn" @click="toDown">
        <view class="icon send"></view>
        发送到邮箱
      </view>
    </view>
    <scroll-view v-if="kemuVIP" class="pdf_list" :scroll-y="true">
      <view class="img_wrapper" v-for="(content, n) in course.contents" :key="content.id">
        <image :src="content.coverUrl" mode="widthFix" style="width: 750rpx"
               :lazy-load="true"></image>
      </view>
    </scroll-view>
    <scroll-view v-else class="pdf_list" :scroll-y="true">
      <view class="img_wrapper">
        <image :src="course.coverUrl" mode="widthFix" style="width: 750rpx"
               :lazy-load="true"></image>
      </view>
      <view class="img_wrapper">
        <image :src="course.coverUrl2" mode="widthFix" style="width: 750rpx"
               :lazy-load="true"></image>
        <view class="vip_gateway">
          <view class="img"></view>
        </view>
      </view>
    </scroll-view>
    <view class="btn_container" v-if="!kemuVIP" @click="toBuy">
      <view class="pay_btn">
        开通会员查看全部技巧
      </view>
    </view>
  </view>
</template>
<script>
import Navbar from "@/components/navbar.vue";
import {commonApi, courseApi} from "@/api";
import {mapGetters, mapActions} from 'vuex'

export default {
  name: "pdf_detail",
  components: {Navbar},
  data() {
    return {
      course: null
    }
  },
  computed: {
    ...mapGetters(['mainProduct', 'isKemu1VIP', 'isKemu2VIP', 'isKemu3VIP', 'isKemu4VIP']),
    kemuVIP() {
      if (this.course) {
        if (this.course.kemu === 1) {
          return this.isKemu1VIP
        }
        if (this.course.kemu === 2) {
          return this.isKemu2VIP
        }
        if (this.course.kemu === 3) {
          return this.isKemu3VIP
        }
        if (this.course.kemu === 4) {
          return this.isKemu4VIP
        }
      }
    }
  },
  async onLoad({id}) {
    const res = await courseApi.info(id)
    this.course = res.data.data
  },
  methods: {
    ...mapActions(['refreshUser']),
    async toBuy() {
      uni.navigateTo({
        url: '/pages/vip/vip'
      })
    },
    toDown() {
      if (!this.kemuVIP) {
        uni.showToast({
          icon: 'none',
          title: '请先开通会员！'
        })
        return
      }
      uni.navigateTo({
        url: '/pages/pdf_detail/resource_detail?id=' + this.course.id
      })
    },
  }
}
</script>


<style lang="scss">
page {
  height: 100%;

  ::v-deep .top-bar {
    &.white {
      border-bottom: none;
    }
  }
}

.pdf_detail {
  height: 100%;
  display: flex;
  flex-direction: column;


  .process_row {
    font-size: 14px;
    display: flex;
    color: #000;
    align-items: center;
    padding: 20rpx 32rpx;
    background: #fff;

    .label {
      display: flex;
      flex: 1;
      font-weight: bold;

      .red {
        color: #FB1D1E;
      }
    }

    .btn {
      background-color: #FEF3D2;
      height: 66rpx;
      border-radius: 100rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 30rpx;
      margin-left: 24rpx;

      .icon {
        width: 30rpx;
        height: 28rpx;
        background-size: cover;
        background-position: center;
        margin-right: 10rpx;

        &.send {
          background-image: url("http://down.qwdata.vip/app_icon/1701687150239");
        }

        &.down {
          background-image: url("http://down.qwdata.vip/app_icon/1701687156798");
        }
      }
    }
  }

  .btn_container {
    .pay_btn {
      color: #fff;
      font-size: 16px;
      height: 108rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 32rpx 20rpx;
      background-image: linear-gradient(112deg, #E97A59 0%, #F05844 44%, #E8472C 100%);
      border-radius: 100rpx;
    }
  }

  .pdf_list {
    flex: 1;
    background-color: #fff;
    overflow: hidden;

    .vip_gateway {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 650rpx;
      background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.95) 14%, rgba(255, 255, 255, 0.96) 48%, #FFFFFF 100%);
      display: flex;
      align-items: flex-end;
      justify-content: center;

      .img {
        height: 470rpx;
        width: 700rpx;
        background-size: cover;
        background-image: url("http://down.qwdata.vip/app_icon/1701687847650");
      }
    }

    .img_wrapper {
      position: relative;
    }
  }
}

</style>
